<template>
	<view>
		<image src="../../../客服微信.jpg"></image>
	</view>
				scroll-y="true" 
				refresher-enabled="true" 
				:refresher-triggered="triggered"
				:refresher-threshold="100" 
				@refresherpulling="onPulling"
				@refresherrefresh="onRefresh" 
				@refresherrestore="onRestore" 
				@refresherabort="onAbort"
				@scrolltolower="onButtomRefresh">
				<view class='goshop-page-main-list' :id="'content-wrap' + index">
					<!-- 空白页 -->
					<u-empty v-if="isEmpty === true && goodDataList.length === 0" :text="emptyText" mode="list"></u-empty>
					<view v-if="goodDataList.length > 0">
						<view class="goshop-attention-wrap u-flex u-p-20" v-if="followDataList.length > 0">
							<text class="base-font-size text-color-one">{{attentionText}}</text>
							<view style="display:flex;justify-content: space-between;" class="u-m-t-20">
								<view v-for="(item,index) in followDataList" :key="index">
									<goshop-avatar :img='item.memberInfo.avatar' :name='item.memberInfo.nickname'></goshop-avatar>
								</view>
							</view>
						</view>
						<view class="u-m-t-10">
							<goshop-good-waterfalls-flow ref="waterfallsFlowRef" @imageClick="onGoodClick" @wapperClick="onGoodClick" :data="goodDataList"></goshop-good-waterfalls-flow>
						</view>
					</view>
					<view>
						<u-loadmore
								:status="loadStatus" 
								:loading-text="loadingText" 
								:loadmore-text="loadmoreText" 
								:nomore-text="nomoreText" 
								loadingIcon="semicircle"
								@loadmore="getGoodPage"
								style="margin-bottom: 60px;"
							/>
					</view>
				</view>
		    </scroll-view>
	</view>
</template>

<script>
	import {followList,attentionPage} from '@/common/http.api.js'
	import jwt from '@/utils/jwt.js'
	export default {
		props: {
		  refresher: {
		    type: Boolean
		  },
		  index:{
			  type:Number,
			  default:0
		  }
		},
		data() {
			return {
				triggered: false,
				followDataList:[],
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				goodDataList: [],
				emptyText:'',
				loadStatus: 'loadmore',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				params: {
					pageNo: 1,
					pageSize: 10,
				},
				attentionText:'',
			}
		},
		mounted(){
			this.refresh();
			this._freshing = false;
			this.getFollowList();
			this.getGoodPage();
			setTimeout(() => {
				this.triggered = true;
			}, 1000)	
		},
		methods: {
			refresh(){
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
				this.attentionText = this.$t('attention.my.text');
			},
			onGoodClick(item){
				uni.navigateTo({
					url: 'pages/common/good/info?id='+item.id
				});
			},
			onPulling(e) { //自定义下拉刷新控件被下拉
				console.log("onpulling", e);
			},
			// 自定义下拉刷新被复位
			onRestore() {
			  this.triggered = 'restore'; // 需要重置
			  console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
			  console.error("onAbort");
			},
			onRefresh() {  //自定义下拉刷新被触发
			    debugger
			    let that = this;
			    if (that._freshing) return;
			    that._freshing = true;
				that.getGoodPage();
			    setTimeout(() => {
			        that.triggered = false;
			        that._freshing = false;
					this.$refs.waterfallsFlowRef.refresh()
			    }, 3000)
				console.log("onRefresh");
			},
			onButtomRefresh() { //底部刷新
				 console.log("onButtomRefresh");
			},
			getFollowList(){
				if(jwt.getLogin()){
					followList().then((res)=>{
						if(res.code === 0){
							this.followDataList = res.data;
						}
					  }).catch(error=>{
						console.error(error)
					  })
				}
			},
			getGoodPage(){
				if(jwt.getLogin()){
					this.loadStatus = 'loading';
					attentionPage(this.params).then((res)=>{
						uni.stopPullDownRefresh()
						if(res.code === 0){
						  if(res.data.list.length === 0){
							this.isEmpty = true;
							this.loadStatus = 'nomore'
							this.loadMoreFlag = false;
						  }else if (res.data.list.length < 10) {
							this.loadStatus = 'nomore'
							this.loadMoreFlag = false;
						  } else {
							this.params.pageNo++;
							this.loadStatus = 'loading'
							this.loadMoreFlag = true;
						  }
						  if (this.params.pageNo > 1) {
							this.goodDataList = this.goodDataList.concat(res.data.list);
						  } else {
							this.goodDataList = res.data.list;
						  }
						}
					  }).catch(error=>{
						console.error(error)
					  })
				}else{
					this.isEmpty = true;
				}
			},
		}
	}
</script>

<style lang="scss">
.goshop-attention-wrap{
	background-color: $goshop-color-auxiliary-one;
	border-radius:10rpx;
	//height: 240rpx;
}
.goshop-page-main-scroll {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	//height:calc(100vh - var(--window-top));//calc()是动态计算函数
}
.goshop-page-main-list{
	//background-color: $goshop-color-auxiliary-one;
	padding:0 20rpx;
}
</style>
